<script setup lang="ts">
import { ref } from 'vue'
import axios from 'axios'
import type { StudentInfo } from '@/types/StudentType.ts'
import { ElNotification } from 'element-plus'

// 学生名单
const students = ref<StudentInfo[]>([])

// 当前选中的学生
const selectedStudents = ref<StudentInfo[]>([])

// 用户输入的随机选择人数
const numberOfSelections = ref(1)

// 滚动点名
function scrollSelectStudents() {
  if (students.value.length === 0) {
    ElNotification({
      title: '警告',
      message: '学生名单为空，无法进行随机点名。',
      type: 'warning',
    })
    return
  }

  if (numberOfSelections.value <= 0 || numberOfSelections.value > students.value.length) {
    ElNotification({
      title: '警告',
      message: '选择人数无效',
      type: 'warning',
    })
    return
  }

  const intervalId = setInterval(() => {
    selectedStudents.value = []
    const indices = new Set<number>()
    while (indices.size < numberOfSelections.value) {
      const randomIndex = Math.floor(Math.random() * students.value.length)
      indices.add(randomIndex)
    }
    selectedStudents.value = Array.from(indices).map((index) => students.value[index])
  }, 100) // 每100毫秒切换一次

  setTimeout(() => {
    clearInterval(intervalId)
    // 最终选定学生
    const finalIndices = new Set<number>()
    while (finalIndices.size < numberOfSelections.value) {
      const finalIndex = Math.floor(Math.random() * students.value.length)
      finalIndices.add(finalIndex)
    }
    selectedStudents.value = Array.from(finalIndices).map((index) => students.value[index])
  }, 3000) // 3秒后停止滚动
}

const searchValue = ref({
  current: 1,
  pageSize: 100,
  absentStatus: 0,
})

const getStudentList = async () => {
  try {
    const res = await axios.post('/api/student/list/page', searchValue.value)
    students.value = res.data.data.records // 假设返回的数据结构中学生名单在 data 属性中
    console.log('学生名单已更新:', students.value)
  } catch (error) {
    ElNotification({
      title: '警告',
      message: '获取学生名单失败',
      type: 'warning',
    })
  }
}

getStudentList()
</script>

<template>
  <el-card>
    <div class="random-select">
      <h1>随机点名</h1>
      <div class="controls">
        <el-input-number
          v-model="numberOfSelections"
          :min="1"
          :max="Math.max(1, students.length)"
          label="选择人数"
          size="large"
          controls-position="default"
        ></el-input-number>
        <el-button type="primary" @click="scrollSelectStudents" size="large"> 开始点名 </el-button>
      </div>
      <div v-if="selectedStudents.length" class="selected-student">
        <ul>
          <li v-for="student in selectedStudents" :key="student.id">
            {{ student.name }}
          </li>
        </ul>
      </div>
    </div>
  </el-card>
</template>

<style scoped lang="scss">
.random-select {
  text-align: center;
  margin-top: 50px;
  padding: 30px;
  background-color: #ffffff;
  border-radius: 12px;

  h1 {
    font-size: 32px;
    color: #444;
    margin-bottom: 25px;
    font-weight: 600;
  }

  .controls {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-bottom: 20px;

    .el-input-number {
      margin-bottom: 10px;
    }
  }

  .selected-student {
    margin-top: 25px;
    font-size: 26px;
    font-weight: bold;
    color: #007bff;
    animation: fadeIn 0.5s ease-in-out;

    ul {
      list-style-type: none;
      padding: 0;

      li {
        margin: 5px 0;
        padding: 10px;
        background-color: #f0f0f0;
        border-radius: 8px;
      }
    }
  }
}

@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(-20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
</style>
